Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(explore): UI changes in dataset panel on Explore page #19394

Merged
merged 9 commits into from
Mar 29, 2022
Merged

feat(explore): UI changes in dataset panel on Explore page #19394

merged 9 commits into from
Mar 29, 2022

Conversation

kgabryje
Copy link
Member

SUMMARY

This PR implements several UI changes in Explore's dataset panel.
List of changes:

  • change color of background to white
  • separate each column/metric label with vertical margins
  • add dots icon to column/metric labels to indicate they're draggable
  • move certification icon to the right side of the label
  • Change font size of column/metric section labels to 12 and remove separation line

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

image

TESTING INSTRUCTIONS

Verify that everything works like before

ADDITIONAL INFORMATION

  • Has associated issue:
  • Required feature flags:
  • Changes UI
  • Includes DB Migration (follow approval process in SIP-59)
    • Migration is atomic, supports rollback & is backwards-compatible
    • Confirm DB migration upgrade and downgrade tested
    • Runtime estimates and downtime expectations provided
  • Introduces new feature or API
  • Removes existing feature or API

CC @kasiazjc

@kgabryje kgabryje changed the title Feat/dataset panel UI feat(explore): UI changes in dataset panel on Explore page Mar 28, 2022
@michael-s-molina
Copy link
Member

michael-s-molina commented Mar 28, 2022 •
edited
Loading

I love the changes! Really improved the user experience. cc @kasiazjc

I have one suggestion that may be tackled in a separate PR if you wish. Can we make the draggable image respect the border-radius and width of the original component? If we do that, when the user is dropping, it will fit exactly in the droppable area 🤩

Screen.Recording.2022-03-28.at.2.58.13.PM.mov

@kgabryje
Copy link
Member Author

Can we make the draggable image respect the border-radius and width of the original component

Good point, done!
image

michael-s-molina
michael-s-molina approved these changes Mar 29, 2022
View reviewed changes
Copy link
Member

@michael-s-molina michael-s-molina left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM. Thanks for the amazing changes @kgabryje! It looks so much better!

@codecov
Copy link

codecov bot commented Mar 29, 2022 •
edited
Loading

Codecov Report

Merging #19394 (df994fc) into master (a619cb4) will increase coverage by 0.00%.
The diff coverage is 93.54%.

❗ Current head df994fc differs from pull request most recent head cdac852. Consider uploading reports for the commit cdac852 to get more accurate results

@@           Coverage Diff           @@
##           master   #19394   +/-   ##
=======================================
  Coverage   66.48%   66.49%           
=======================================
  Files        1670     1670           
  Lines       63968    63971    +3     
  Branches     6512     6510    -2     
=======================================
+ Hits        42531    42535    +4     
+ Misses      19748    19747    -1     
  Partials     1689     1689
Flag Coverage Δ
javascript 51.33% <93.54%> (+<0.01%) ⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files Coverage Δ
...ntrols/src/components/CertifiedIconWithTooltip.tsx 80.00% <ø> (ø)
...d/packages/superset-ui-chart-controls/src/index.ts 100.00% <ø> (ø)
...omponents/ColumnConfigControl/ColumnConfigItem.tsx 0.00% <ø> (ø)
...tiveFilters/FiltersConfigModal/DraggableFilter.tsx 71.87% <ø> (ø)
...-ui-chart-controls/src/components/ColumnOption.tsx 85.71% <50.00%> (+1.09%) ⬆️
...d/src/explore/components/DatasourcePanel/index.tsx 69.23% <80.00%> (-0.13%) ⬇️
...src/components/ColumnTypeLabel/ColumnTypeLabel.tsx 100.00% <100.00%> (ø)
...controls/src/components/InfoTooltipWithTrigger.tsx 100.00% <100.00%> (ø)
...-ui-chart-controls/src/components/MetricOption.tsx 94.73% <100.00%> (+0.29%) ⬆️
...ontend/src/dashboard/components/dnd/DragHandle.tsx 83.33% <100.00%> (-2.39%) ⬇️
... and 3 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update a619cb4...cdac852. Read the comment docs.

@kgabryje kgabryje force-pushed the feat/dataset-panel-ui branch from 8a797f5 to cdac852 Compare March 29, 2022 17:44
@kgabryje kgabryje merged commit a076ae6 into apache:master Mar 29, 2022
@villebro villebro added lts-v1 and removed lts-v1 labels Mar 30, 2022
philipher29 pushed a commit to ValtechMobility/superset that referenced this pull request Jun 9, 2022
@kgabryje @philipher29
feat(explore): UI changes in dataset panel on Explore page (apache#19394
8b48e5b 
)

* feat(explore): Implement new design for dataset panel

* Fixes

* Replace drag handle in dashboard builder

* Add missing types

* Type fix

* Fix tests

* Fix non-dnd version

* Fix test

* Replace margin with height
@mistercrunch mistercrunch added 🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels 🚢 2.0.0 labels Mar 13, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@michael-s-molina michael-s-molina michael-s-molina approved these changes

@geido geido Awaiting requested review from geido

Assignees
No one assigned
Labels
🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels size/XL 🚢 2.0.0
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@kgabryje @michael-s-molina @mistercrunch @villebro